<template>
  <app-container :percept="percept">
    <view class="container">
      <view class="flex flex-col align-center gap-1 overflow-hidden">
        <u-input class="font ml-9 search" :placeholder="$t('common.search')" prefixIcon="search" @click="skipToSearchPage"></u-input>
        <u-tabs
          :list="tabList"
          lineWidth="30"
          lineColor="linear-gradient(68.5deg, #0dfcd2 1.7%, #0dfcd200 98.3%)"
          :activeStyle="{
            color: ' #ffffff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
          }"
          :inactiveStyle="{
            color: ' #ffffff80',
            transform: 'scale(1)'
          }"
          itemStyle=" padding-right: 15px; height: 30px;"
          style="margin-left: 10px; width: 97%"
          @change="handleSelectType"
          :current="videoType"
        >
          <view slot="right" style="padding-left: 4px">
            <image class="image_6 pos_7" src="@/static/common/i-home-dropdown.png" @click="handleOpen()" v-if="!isPopupVisible" />
            <view class="topLeft" v-if="isPopupVisible">
              <image class="self-end image_6" src="@/static/common/i-dropdown-close.png" @click="handleClosed()" />
            </view>
          </view>
        </u-tabs>
        <div class="content">
          <view class="flex-col items-start group_2 equal-division-item" v-for="item in vedioList">
            <!-- <image class="image_7" :src="require(item.image)" @click="skipToVedio(item.text)" /> -->
            <image :src="item.image" class="image_7" @click="skipToVedio(item.playletId)"></image>

            <text class="font_3 mt-13">{{ item.text }}</text>
            <text class="font_4 text_4 mt-13">{{ item.des }}</text>
          </view>
        </div>

        <dropDown :show="isPopupVisible" :showList="tabList" class="dropDown" @closed="handleClosed()" @checkSelect="(e) => handleSelectType(e)"></dropDown>
      </view>
    </view>

    <app-tabbar current="home"></app-tabbar>
  </app-container>
</template>

<script>
import lifecycleMixin from '@/mixins/lifecycle.js';
import dropDown from './dropdown.vue';
import AppTabbar from '@/components/AppTabbar.vue';
import { getPlayletListAPI, getPlayClassAPI } from '@/service/index.js';
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { mapGetters } from 'vuex';

export default {
  mixins: [lifecycleMixin],
  components: { AppTabbar, dropDown },
  data() {
    return {
      tabList: [],
      vedioList: [],
      isPopupVisible: false,
      videoType: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 15
      }
    };
  },
  computed: {},
  onLoad() {
    this.getPlayletList();
    this.getPlayClassAPI();
  },

  // onPullDownRefresh() {
  //   console.log('正在刷新中......')
  //   this.pageInfo.pageNum++;
  //   this.getPlayletList()
  // },

  // onPullDownRefresh() {
  //   console.log('正在刷新中......')
  //   this.pageInfo.pageNum++;
  //   this.getPlayletList()
  // },

  // onReachBottom() {
  //       console.log('test......')
  //   this.pageInfo.pageNum++;
  //   this.getPlayletList()
  // },

  methods: {
    async getPlayletList() {
      const res = await getPlayletListAPI({
        classifyId: this.videoType,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize
      });
      this.vedioList = res.data.list;
      res.data.list.forEach((item) => {
        item.image = 'https://miniflix.tos-accelerate.volces.com/res/' + item.cover;
        item.text = item.playletName;
        if (uni.getLocale() === 'en') {
          item.des = item.num + 'episodes in total';
        } else {
          item.des = '共' + item.num + '集';
        }
      });

      this.vedioList = [...this.vedioList, ...res.data.list];
      console.log(' this.vedioList', this.vedioList);
    },
    async getPlayClassAPI() {
      const res = await getPlayClassAPI();
      if (res.data) {
        this.tabList = res.data;
      }
    },

    showPopup() {
      this.isPopupVisible = true;
    },
    hidePopup() {
      this.isPopupVisible = false;
    },
    skipToSearchPage() {
      uni.navigateTo({
        url: '/pages/search/index'
      });
    },
    skipToVedio(text) {
      uni.navigateTo({
        url: `/pages/video/index?playletId=${text}&num=1&`
      });
    },
    handleClosed() {
      this.isPopupVisible = false;
    },
    handleOpen() {
      this.isPopupVisible = true;
    },
    handleSelectType(item) {
      console.log(item);
      this.videoType = item.index;
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = 15;
      this.getPlayletList();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  min-height: 100%;
  /deep/ .u-icon__icon {
    color: #ffffff !important;
  }

  .dropdown {
    height: 30vh;
    position: absolute;
    top: 7rem;
    width: 100%;
  }

  .ml-9 {
    margin-left: 0.56rem;
  }

  .content {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .image_6 {
    border-radius: 0.38rem;
    width: 1.5rem;
    height: 0.75rem;
  }

  .topLeft {
    background-color: #140c2b;
    right: 0;
    padding: 0.3rem;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
  }

  .search {
    border-radius: 1rem;
    margin-top: 2rem;
    width: 90%;
  }

  .dropdown-icon {
    border-radius: 0.38rem;
    color: #ffffff80;
    width: 1.5rem;
    height: 0.75rem;
  }

  /deep/ .u-tabs__wrapper__nav__line {
    position: absolute;
    bottom: 4rpx;
    border-radius: 200rpx;
    background-image: linear-gradient(68.5deg, #0dfcd2 1.7%, #0dfcd200 98.3%);
    border-radius: 0.75rem;
    width: 2.75rem;
    height: 0.25rem;
    left: -12rpx;
  }

  /deep/ .u-badge--dot {
    height: 16rpx;
    width: 16rpx;
    border-top-right-radius: 200rpx;
    border-top-left-radius: 200rpx;
    border-bottom-left-radius: 200rpx;
    border-bottom-right-radius: 200rpx;
    margin-bottom: 19rpx;
  }

  .mt-13 {
    margin-top: 0.81rem;
  }

  .group_2 {
    .image_7 {
      border-radius: 0.5rem;
      filter: drop-shadow(0rem 0.25rem 0.25rem #00000033);
      width: 100%;
    }

    .font_3 {
      font-size: 0.88rem;
      font-family: PingFang SC;
      line-height: 0.65rem;
      color: #ffffff;
    }

    .font_4 {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.65rem;
      color: #ffffff80;
    }

    .text_4 {
      line-height: 0.69rem;
    }
  }

  .equal-division-item {
    padding: 0.25rem 0.38rem;
    width: 47vw;
  }
}
</style>
